<template>
	<div class="listbody"> 
		<!-- <span class="" @click='changelist()'>...</span> -->
		<div class="search">
			<div class="bar">
				<input type="text" name="" placeholder="请输入搜索内容" @input="search">
			</div>
		</div>
		<nav class="tabullist" :class="{ grid: isgrid}">
			<li v-for="(item,index) in slist" @click="showOverlay((slist.length-index-1))">
				<span>{{item.times}}</span>
				<p>
			        {{item.content}}
				</p>
			</li>
		</nav>
	<Meditor :list='selectedlist' v-show="isactive" @change="selectlist" @modify="modify"></Meditor>
	<div class="addbtn" v-show="isadd">
			<span @click="add">+</span>
	</div>
	</div>
</template>

<script type="text/javascript">
import { mapActions,mapGetters } from 'vuex'
import Meditor from '../components/m-editor'
	export default{
		name: "child",
		data(){
			return {
				selected: -1,
            	selectedlist: {},
            	slist: [],
				isactive:false,
				isgrid:false,
				isadd:true,
				list :[
						{
							"times":"2018年9月8号",
							"content":"思维检测表很简单，便于使用。它留出了地方记录积极的行动，从而鼓励使用者考虑如何解决问题。"
						},
						{
							"times":"2018年9月9号",
							"content":"我的烦恼：写出你的烦恼。烦恼的原因：写出我烦恼的原因。辩驳：为什么不能这样，这样也不是最差的。积极的行动：做出实际行动减少烦恼。"
						}
				]
			}
		},
		 filters: {
	        customOrder(slist){
	            let first = slist.shift();
	            let last = slist.pop();
	            slist.push(first);
	            slist.push(last);
	            return slist;
	        }
	    },
		created() {
            this.setSlist(this.list);
        },
		methods:{
			changelist(){
				this.isgrid = !this.isgrid;
			},
			selectlist() {
		       	this.isactive = !this.isactive;
		       	this.isadd = !this.isadd;
		    },
		    // 修改数据
            showOverlay(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.selectlist();
                console.log(index);
            },
            // 点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    this.$set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                	//add添加数据
                    this.list.push(arr);
                }            
                this.setSlist(this.list);
                // console.log(arr);
                this.selectlist();
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
   				/*渲染显示方式从后到前*/
                this.slist = JSON.parse(JSON.stringify(arr)).reverse();
            },
            add: function () {
            	this.nowTimes();
            	// console.log(this.nowTime);
            	var newtime = this.nowTime;
                this.selectedlist = {
                    times: newtime,
                    content: '',
                };
                this.selectlist();
            },
			// 获取当前时间函数
			  timeFormate(timeStamp) {
			      let year = new Date(timeStamp).getFullYear();
			      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
			      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
			      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
			      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
			      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
			      // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
			      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
			      // console.log(this.nowTime);
			    },
			// 定时器函数
			    nowTimes(){
			      this.timeFormate(new Date());
			      setInterval(this.nowTimes,30*1000);
			    },
			    // 搜索
	            search(e) {
	                var v = e.target.value,
	                self = this;
	                self.searchlist = [];
	                if (v) {
	                    var ss = [];
	                    // 过滤需要的数据
	                    this.list.forEach(function (item) {
	                        if (item.times.indexOf(v) > -1) {
	                            if (self.searchlist.indexOf(item.times) == -1) {
	                                self.searchlist.push(item.times);
	                            }
	                            ss.push(item);
	                        } else if (item.content.indexOf(v) > -1) {
	                            if (self.searchlist.indexOf(item.content) == -1) {
	                                self.searchlist.push(item.content);
	                            }
	                            ss.push(item);
	                        }
	                    });
	                    this.setSlist(ss); // 将过滤后的数据给了slist
	                } else {
	                    // 没有搜索内容，则展示全部数据
	                    this.setSlist(this.list);
	                }
	            },
		},
		mounted(){

		},
		components:{
			"Meditor":Meditor,
		},
	}
</script>
<style type="text/css">
	/* 搜索框 */
	.search{
		margin: 1rem 0.5rem 0 0.5rem;
	}
	.bar{
		position: relative;
    	border: 1px solid #EAEAEA;
    	background: #fff;
	}
	.search input{
		width: 90%;
		background:	#FFFFFF no-repeat 13px 13px;
		height: 1.8rem;
    	border: 0;
    	padding-left: 1.5rem;
    	outline: none;
	}
	.listbody{
		/*border: 1px solid red;*/
		margin-top: -10px;
	}
	/*竖排排序*/
	.tabullist.grid{

	}
	.tabullist.grid li span{
		font-size:15px;
		color: #9e9e9e;
	}
	.tabullist.grid p{
		margin-top: 4px;
		margin-bottom: 0;
		margin-left: 3%;
		margin-right: 3%;
		padding-top: 5px;
		border-top: 1px solid #EAEAEA;
        height: 60px;
       /* border:1px solid red;*/
        overflow:hidden;
        text-overflow:ellipsis; 
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size:14px;
	}
	.tabullist.grid li{
		/*float: left;*/
		overflow: hidden;
		border: 1px solid #EAEAEA;
		width: 94.7%;
		height:90px;
		background: #fafafa;
		list-style: none;
		margin-left: 2.5%;
		margin-top: 1rem;
	}
	/*九宫格排序*/
	.tabullist{
		display: flex;
		flex-wrap: wrap;
	}
	.tabullist li span{
		font-size:15px;
		color: #9e9e9e;
	}
	.tabullist p{
		margin-top: 4px;
		margin-bottom: 0;
		margin-left: 3%;
		margin-right: 3%;
		padding-top: 5px;
		border-top: 1px solid #EAEAEA;
        height: 60px;
       /* border:1px solid red;*/
        overflow:hidden;
        text-overflow:ellipsis; 
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size:14px;
	}
	.tabullist li{
		/*float: left;*/
		overflow: hidden;
		border: 1px solid #EAEAEA;
		width: 46%;
		height:95px;
		background: #fafafa;
		list-style: none;
		margin-left: 2.5%;
		margin-top: 10px;
	}
	/* 底部添加按钮 */
	.addbtn{
		width: 100%;
		height: 40px;
		position: fixed;
		bottom:0;
		line-height: 40px;
	}
	.addbtn span{
		font-size: 25px;
		position: absolute;
		bottom:100%;
		right: 6%;
		width: 40px;
		border-radius: 50%;
		background:#00d1b2;
		color: white;
		cursor: pointer;
	}
</style>